<template>
  <div
      class="text4-content"
      v-loading="loading"
      :element-loading-text="loadingText"
  >
    <!--导入表格生成table组件-->
    <el-upload
        class="upload-demo" ref="upload"
        accept=".xls,.xlsx"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="upload"
        :show-file-list="false"
        :auto-upload="false"
    >
      <el-button slot="trigger" size="large" icon="el-icon-download el-icon--left" type="primary">导入表格生成table组件
      </el-button>
    </el-upload>

    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        title="导入表格出错"
        :visible.sync="dialogData.show"
        width="500px"
    >
      <ul class="dialog-content">
        <li><span>表名</span><i>{{ dialogData.name }}</i></li>
        <li><span>表头名</span> <i>{{ dialogData.title }}</i></li>
        <li><span>第几行</span> <i>{{ dialogData.num }}</i></li>
        <li><span>原因</span> <i>{{ dialogData.reason }}</i></li>
      </ul>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogData.show = false">确 定</el-button>
      </div>
    </el-dialog>
    <div @click="genchuanApi()">ThingsBoard测试登录  开启测试先把拦截器关掉</div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import {saveAs} from 'file-saver';

export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      loadingText: '加载文件中',
      //导出文件集合
      exportFileData: [],
      //报错时候的提示
      dialogData: {
        show: false,
        name: '',//表名
        title: '',//表头
        num: 0,//第几条
        reason: '',//理由
      },
      booleanOptions: [
        {label: '是', value: true},
        {label: '否', value: false}
      ],
      //按钮颜色
      butColorOptions: [
        {label: '白色', value: ''},
        {label: '蓝色', value: 'primary'},
        {label: '绿色', value: 'success'},
        {label: '灰色', value: 'info'},
        {label: '黄色', value: 'warning'},
        {label: '红色', value: 'danger'},
      ],
      //时间选择器类型
      dateTypeOptions: [
        {label: '年', value: 'year'},
        {label: '月', value: 'month'},
        {label: '日', value: 'date'},
        {label: '日期和时间', value: 'datetime'},
        {label: '多个日', value: 'dates'},
        {label: '日期和时间范围', value: 'datetimerange'},
        {label: '日期范围', value: 'daterange'},
        {label: '月份范围', value: 'monthrange'},
      ],
    };
  },
  mounted() {
  },
  methods: {
    genchuanApi(){
      console.log(123)
      let data={
        "username":"825288717@qq.com",
        "password":"123456"
      }
      this.$genchuan(data).then((result) => {
        console.log(result);
      })
    },
    //颜色
    searchQuery(val, array) {
      /* if(!val){
         return ''
       }*/
      for (let i = 0; i < array.length; i++) {
        if (val === array[i].label) {
          return array[i].value
        }
      }
      return ''
    },
    //输出指定默认值
    searchQuery2(val, array, defaultValue) {
      for (let i = 0; i < array.length; i++) {
        if (val === array[i].label) {
          return array[i].value
        }
      }
      return defaultValue
    },

    //导入表格
    upload(file) {// fileList
      let files = {0: file.raw}// 取到File
      this.readExcel(files)
    },
    readExcel(files) { // 表格导入
      this.exportFileData = [];
      if (files.length <= 0) { // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message.success('上传格式不正确，请上传xls或者xlsx格式');
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames;//表名数组
          let routerArray = [];//路由页面名称和路由名称
          let routerNameArray = [];//路由页面名称数组
          for (let i = 0; i < wsname.length; i++) {
            this.dialogData.name = wsname[i];
            //导航数据处理
            if (wsname[i] === '导航配置') {
              let xlsxLth = workbook.Sheets[workbook.SheetNames[0]]["!ref"];
              let stopX = xlsxLth.substr(xlsxLth.indexOf(':') + 1, workbook.Sheets[workbook.SheetNames[0]]["!ref"].length);
              workbook.Sheets[workbook.SheetNames[0]]["!ref"] = "A2:" + stopX;
              const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname[i]]);// 生成json表格内容
              for (let j = 0; j < ws.length; j++) {
                if (!ws[j].id && !ws[j].pid) {
                  let jsonData = {
                    页面名称: ws[j]['页面名称'],
                    路由名称: `navigation${j}`
                  }
                  routerNameArray.push(ws[j]['页面名称'])
                  routerArray.push(jsonData)
                }
                if (ws[j].pid) {
                  let jsonData = {
                    页面名称: ws[j]['页面名称'],
                    路由名称: `navigation${j}`
                  }
                  routerNameArray.push(ws[j]['页面名称'])
                  routerArray.push(jsonData)
                }
              }
              //导航数组
              let routesData = `
                      {
                              path: '/redirect',
                              component: Layout,
                              meta: {authority: [0], id: 20000},
                              children: [
                                  {
                                      meta: {authority: [100], id: 20000},
                                      path: '/redirect/:path(.*)',
                                      component: () => import(/* webpackChunkName: "redirect-index" */ '@/views/redirect/index')
                                  }
                              ]
                      },
                      {
                          path: '/',
                          redirect: '/login',
                          meta: {authority: [0]},
                      }, {
                          path: '/login',
                          name: 'login',
                          meta: {authority: [0]},
                          component: () => import(/* webpackChunkName: "login" */ '@/views/login')
                      },{
                          path: '/dashboard',
                          name: 'dashboard',
                          component: Layout,
                          redirect: '/dashboard/index',
                          meta: {title: '首页', authority: [100], onlyOne: 1, id: 20000, icon: 'el-icon-s-home'},
                          children: [{
                              path: 'index',
                              name: 'index',
                              meta: {title: '首页', authority: [100]},
                              component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard')
                          }]
                      },
                `
              let routes = [];
              for (let j = 0; j < ws.length; j++) {
                //页面名称不能为空
                if (!ws[j]['页面名称']) {
                  this.dialogData.show = true;
                  this.dialogData.name = wsname[i];
                  this.dialogData.title = '页面名称';
                  this.dialogData.num = ws[j]['__rowNum__'] + 1;
                  this.dialogData.reason = '不能为空';
                  return false;
                }
                //不能同时设置id和pid
                if (ws[j]['id'] && ws[j]['pid']) {
                  this.dialogData.show = true;
                  this.dialogData.title = 'id 或 pid';
                  this.dialogData.num = ws[j]['__rowNum__'] + 1;
                  this.dialogData.reason = '子导航的一级导航或子导航设置错误,不能同时有值';
                  return false;
                }
                //id必须唯一
                if (ws[j]['id']) {
                  let num = 0;
                  for (let k = 0; k < ws.length; k++) {
                    if (ws[j]['id'] == ws[k]['id']) {
                      num++
                      if (num > 1) {
                        this.dialogData.show = true;
                        this.dialogData.name = wsname[i];
                        this.dialogData.title = 'id';
                        this.dialogData.num = ws[j]['__rowNum__'] + 1;
                        this.dialogData.reason = 'id必须唯一';
                        return false;
                      }
                    }
                  }
                }

                //配置一级导航
                if (!ws[j]['id'] && !ws[j]['pid']) {
                  routesData += `
                              {
                                path: '/navigation${j}',
                                name: 'navigation${j}',
                                component: Layout,
                                redirect: '/navigation${j}/index',
                                meta: {title: '${ws[j]['页面名称']}', authority: [100], onlyOne: 1, id: 20000, icon: '${ws[j]['图标'] ? ws[j]['图标'] : 'el-icon-s-home'}'},
                                children: [{
                                    path: 'index',
                                    name: 'index',
                                    meta: {title: '${ws[j]['页面名称']}', authority: [100]},
                                    component: () => import(/* webpackChunkName: "navigation${j}" */ '@/views/navigation${j}')
                                }]
                            },
                  `
                } else if (ws[j]['id']) {
                  //二级导航的一级导航
                  let jsonData = {
                    id: ws[j]['id'],//路由id层
                    path: `navigation${j}`,
                    meta: {
                      title: `${ws[j]['页面名称']}`,
                      authority: 100,
                      icon: `${ws[j]['图标'] ? ws[j]['图标'] : 'el-icon-loading'}`,
                      id: 20000,
                    },
                    children: []
                  }
                  routes.push(jsonData)
                } else if (ws[j]['pid']) {
                  for (let k = 0; k < routes.length; k++) {
                    if (routes[k].id == ws[j]['pid']) {
                      let jsonData = {
                        path: `navigation${j}`,
                        meta: {
                          title: `${ws[j]['页面名称']}`,
                          authority: 100,
                          id: 20000,
                        },
                      }
                      routes[k].children.push(jsonData)
                    }
                  }
                }
              }
              //处理二级导航数据
              for (let j = 0; j < routes.length; j++) {
                if (!routes[j].children[0]) {
                  this.dialogData.show = true;
                  this.dialogData.name = wsname[i];
                  this.dialogData.title = 'id';
                  this.dialogData.num = `错误id ${routes[j].id}`;
                  this.dialogData.reason = '有id没有匹配pid';
                  return false;
                }
                let childrenData = ''
                for (let k = 0; k < routes[j].children.length; k++) {
                  //子导航
                  childrenData += `
                            {
                                path: '${routes[j].children[k].path}',
                                name: '${routes[j].children[k].path}',
                                meta: {title: '${routes[j].children[k].meta.title}', authority: [100], id: 20000},
                                component: () => import(/* webpackChunkName: "${routes[j].children[k].path}" */ '@/views/${routes[j].children[k].path}')
                            },
                  `
                }
                //二级导航全部内容
                let twoData = `
                        {
                          path: '/${routes[j].path}',
                          name: '${routes[j].path}',
                          component: Layout,
                          redirect: '/${routes[j].path}/${routes[j].children[0].path}',
                          meta: {title: '${routes[j].meta.title}', authority: [100], id: 20000, icon: '${routes[j].meta.icon}'},
                          children: [${childrenData}]
                        },
                `
                routesData += twoData;
              }
              routesData += `
                            {
                                path: '/systemSettings',
                                name: 'systemSettings',
                                component: Layout,
                                redirect: '/systemSettings/roleSetUp',
                                meta: {title: '系统设置', authority: [100], id: 20000, icon: 'el-icon-setting'},
                                children: [{
                                    path: 'roleSetUp',
                                    name: 'roleSetUp',
                                    meta: {title: '角色设置', authority: [100], id: 20000},
                                    component: () => import(/* webpackChunkName: "/systemSettings/roleSetUp" */ '@/views/systemSettings/roleSetUp')
                                },{
                                    path: 'accountSettings',
                                    name: 'accountSettings',
                                    meta: {title: '账号设置', authority: [100], id: 20000},
                                    component: () => import(/* webpackChunkName: "/systemSettings/accountSettings" */ '@/views/systemSettings/accountSettings')
                                },{
                                    path: 'systemLog',
                                    name: 'systemLog',
                                    meta: {title: '系统日志', authority: [100], id: 20000},
                                    component: () => import(/* webpackChunkName: "/systemSettings/systemLog" */ '@/views/systemSettings/systemLog')
                                }]
                            },
              `
              let routerData = `
                    import Vue from 'vue'
                    import VueRouter from 'vue-router'
                    Vue.use(VueRouter)
                    import Layout from '@/layout'
                    const routes =[${routesData}]
                    const router = new VueRouter({
                        routes
                    })
                    export default router
                `
              let jsonData = {
                name: 'index.js',//文件名称
                data: routerData,
                status: '路由文件',
              }
              this.exportFileData.push(jsonData)
            } else if (wsname[i] !== '选项配置') {
              //页面属性配置
              //导航配置是否与表名一直
              // if (!routerNameArray.includes(wsname[i])) {
              //   this.dialogData.show = true;
              //   this.dialogData.name = wsname[i];
              //   this.dialogData.title = '表名';
              //   this.dialogData.num = i;
              //   this.dialogData.reason = '表名与路由不一致，请先配置路由';
              //   return false;
              // }
              let fileName = '';//导出文件名称
              for (let j = 0; j < routerArray.length; j++) {
                if (wsname[i] === routerArray[j].页面名称) {
                  fileName = routerArray[j].路由名称;
                }
              }
              let xlsxLth = workbook.Sheets[workbook.SheetNames[i]]["!ref"];
              let stopX = xlsxLth.substr(xlsxLth.indexOf(':') + 1, workbook.Sheets[workbook.SheetNames[i]]["!ref"].length);
              workbook.Sheets[workbook.SheetNames[i]]["!ref"] = "A2:" + stopX;
              const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname[i]]);// 生成json表格内容
              if (!ws.length) {
                continue
              }

              let type = '';//当前运行状态

              //分组配置
              let grouping = [];//配置分组里面有名称和权限
              let groupingArray = [];//分组名称数组
              let fieldData = [];//配置的字段
              let tabsFieldData = [];//tabs搜索字段
              let tableFieldData = [];//表格字段
              let formFieldData = [];//表单字段

              //title 配置
              let titleBasics = [];//title基础配置
              let titleButOption = [];//title按钮配置

              //tabs 配置
              let tabsBasics = [];//tabs基础配置
              let tabsTitleData = [];//tabs标题配置

              //table 配置
              let tableTitleBut = [];//table头部按钮配置
              let tableBasics = [];//table基础配置
              let tableButData = [];//table按钮配置

              //接口配置
              let interfaceData = [];//接口配置

              let allMethods = ''; //方法集合
              let initMethods = '';//初始化方法
              let mountedMethods = '';//mounted方法集合
              let lastMethods = '';//放最后已经没问题的方法
              let importData = '';//import 导入
              let titleVueAll = '';  //title vue
              let tabsVueAll = '';  //tabs vue
              let tableVueAll = ''; //table vue
              let drawerVueAll = ''; //抽屉vue
              let routerApiProp = `
                    import http from '../http';
              `;//生成api文件
              let apiProp2 = {
                tableInit: 'this[`$${this.apiProp.tableInit}`]',//表格初始化
                tableAddEdit: 'this[`$${this.apiProp.tableAddEdit}`]',//表格增加和编辑接口
                tableDel: 'this[`$${this.apiProp.tableDel}`]',//表格删除接口
                tableQuery: ' this[`$${this.apiProp.tableQuery}`]',//表格查一条接口
                drawerEdit: 'drawerEdit',//抽屉改
                drawerQuery: 'drawerQuery',//抽屉查
              };
              let tabsProp = ''; //tabs 配置
              let tabsSearchData = `tabsSearchData:{},`;//tabs 搜索data
              let drawerProp = ''; //新增抽屉 配置
              let formData = `formData:{id:'',`; //新增添加修改
              let optionData = ''; //选项data
              let toConfigureFieldDialogTabsProp = '';//tabs和table dialog tabs配置
              let toConfigureFieldDialogTableProp = '';//tabs和table dialog table配置
              let fileBoolean = false;//是否有上传文件 查看
              let imgBoolean = false;//是否有上传图片 查看
              let addBoolean = false;//有新增按钮
              let editBoolean = false;//有编辑按钮
              let tableParamsData = '';//table 搜索处理
              let tableInitData = '';//table返回值处理

              //表格处理

              for (let j = 0; j < ws.length; j++) {
                if (ws[j]['状态']) {
                  type = ws[j]['状态'];
                  continue
                }
                switch (type) {
                  case '配置分组':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '分组名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '分组名称不能为空';
                      return false
                    }
                    grouping.push(ws[j])
                    break
                  case '配置字段':
                    if (!ws[j]['__EMPTY_1']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '后端字段';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '后端字段不能为空';
                      return false
                    }
                    if (!ws[j]['__EMPTY_3']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '分组名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '分组名称不能为空';
                      return false
                    }
                    for (let k = 0; k < grouping.length; k++) {
                      groupingArray.push(grouping[k]['__EMPTY'])
                    }
                    if (!groupingArray.includes(ws[j]['__EMPTY_3'])) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '分组名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '分组名称不一致';
                      return false
                    }

                    fieldData.push(ws[j]);
                    ws[j].field = ws[j]['__EMPTY_1'].trim().split(";")[0];
                    if (!ws[j]['__EMPTY']) {
                      ws[j]['__EMPTY'] = ws[j]['__EMPTY_1'].trim().split(";//")[1]
                    }
                    if (ws[j]['__EMPTY_7'] === '是') {
                      tabsFieldData.push(ws[j]);
                    }
                    if (ws[j]['__EMPTY_8'] !== '是') {
                      tableFieldData.push(ws[j]);
                    }
                    if (ws[j]['__EMPTY_9'] !== '是') {
                      formFieldData.push(ws[j]);
                    }
                    break
                  case 'title基础配置':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '标题名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '标题名称不能为空';
                      return false
                    }
                    titleBasics.push(ws[j]);
                    break
                  case 'title按钮配置':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '按钮名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '按钮名称不能为空';
                      return false
                    }
                    if (!ws[j]['__EMPTY_1']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '按钮类型';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '按钮类型不能为空';
                      return false
                    }
                    titleButOption.push(ws[j]);
                    break
                  case 'tabs基础配置':
                    tabsBasics.push(ws[j]);
                    break
                  case 'tabs标题配置':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '名称不能为空';
                      return false
                    }
                    tabsTitleData.push(ws[j]);
                    break
                  case 'table头部按钮配置':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '按钮名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '按钮名称不能为空';
                      return false
                    }
                    tableTitleBut.push(ws[j]);
                    break
                  case 'table基础配置':
                    tableBasics.push(ws[j]);
                    break
                  case 'table按钮配置':
                    if (!ws[j]['__EMPTY']) {
                      this.dialogData.show = true;
                      this.dialogData.name = wsname[i];
                      this.dialogData.title = '按钮名称';
                      this.dialogData.num = ws[j]['__rowNum__'] + 1;
                      this.dialogData.reason = '按钮名称不能为空';
                      return false
                    }
                    tableButData.push(ws[j])
                    break
                  case '接口配置':
                    interfaceData.push(ws[j])
                    break
                }
              }

              //title 数据生产 开始
              if (titleBasics.length !== 1) {
                this.dialogData.show = true;
                this.dialogData.name = wsname[i];
                this.dialogData.title = '标题名称';
                this.dialogData.num = titleBasics[0]['__rowNum__'] + 1;
                this.dialogData.reason = '标题名称只能有一个 或 标题名称不能为空';
                return false
              }
              let titleButVue = '';//头部按钮vue
              if (titleButOption.length) {
                for (let j = 0; j < titleButOption.length; j++) {
                  if (titleButOption[j]['__EMPTY_1'] === '新增按钮') {
                    addBoolean = true;
                    titleButVue += `
                                     <el-button type="${this.searchQuery2(titleButOption[j]['__EMPTY_2'], this.butColorOptions, 'primary')}" icon="${titleButOption[j]['__EMPTY_3'] ? titleButOption[j]['__EMPTY_3'] : 'el-icon-plus'} el-icon--left" @click="titleAddClick">${titleButOption[j]['__EMPTY']}</el-button>
                    `
                    lastMethods += `
                               //title ${titleButOption[j]['__EMPTY']} 点击
                              titleAddClick() {
                                this.formData = this.$options.data().formData;
                                this.drawerProp.isDrawer = true;
                                this.drawerProp.loading = false;
                                this.drawerProp.title = '${titleBasics[0]['__EMPTY_1'] ? titleBasics[0]['__EMPTY_1'] : titleButOption[j]['__EMPTY']}';
                                this.drawerProp.status = 'add';
                                this.drawerActiveClick(0)
                              },
                    `
                  } else {
                    titleButVue += `
                                    <el-button type="${this.searchQuery2(titleButOption[j]['__EMPTY_2'], this.butColorOptions, 'warning')}" icon="${titleButOption[j]['__EMPTY_3'] ? titleButOption[j]['__EMPTY_3'] : 'el-icon-check'} el-icon--left" @click="titleBut${j}">${titleButOption[j]['__EMPTY']}</el-button>
                                   `
                    allMethods += `
                              //title${titleButOption[j]['__EMPTY']} 点击
                              titleBut${j}(){
                                  console.log('title${titleButOption[j]['__EMPTY']}点击')
                              },
                    `
                  }
                }
              } else {
                titleButVue += ''
              }
              titleVueAll += `
                          <div class="content-title" ref="title">
                            <div class="su-title">
                              <i class="el-icon-tickets"></i>
                              <span>${titleBasics[0]['__EMPTY']}</span>
                            </div>
                            <div>
                                ${titleButVue}
                                <el-button type="danger" @click="tabsOrTableDialogEmpty">清空设置</el-button>
                            </div>
                        </div>
              `
              //title 结束

              //tabs 数据生产 开始
              if (tabsBasics.length !== 1) {
                this.dialogData.show = true;
                this.dialogData.name = wsname[i];
                this.dialogData.title = 'tabs基础配置';
                this.dialogData.num = titleBasics[0]['__rowNum__'] + 1;
                this.dialogData.reason = 'tabs基础配置必须只能有一个';
                return false
              }
              tabsProp += `
                        //tabs 配置
                         tabsProp: {
                            active: '${tabsBasics[0]['__EMPTY'] ? tabsBasics[0]['__EMPTY'] : ''}',//tabs 默认选择哪个标题 空是0
                            statusField: '${tabsBasics[0]['__EMPTY_1'] ? tabsBasics[0]['__EMPTY_1'] : 'status'}',//切换的字段名
                            SearchDropDown: true,//高级搜索下拉默认显示状态
                            liHtmlNum:'',//有高级搜索时候差几个li
                         },
              `
              if (tabsTitleData.length) {
                let tabPane = '';
                //tabs切换标题
                for (let j = 0; j < tabsTitleData.length; j++) {
                  tabPane += `
                          <el-tab-pane name="${tabsTitleData[j]['__EMPTY_1'] ? tabsTitleData[j]['__EMPTY_1'] : ''}" label="${tabsTitleData[j]['__EMPTY']}"/>
                  `
                }
                //是否有高级搜索
                let tabsSearchVue = '';
                if (tabsFieldData.length) {
                  //tabs和table dialog tabs配置
                  for (let j = 0; j < grouping.length; j++) {
                    let jsonData = {
                      name: grouping[j]['__EMPTY'],//标题
                      show: true,//搜索是否显示
                      option: []
                    }
                    for (let k = 0; k < fieldData.length; k++) {
                      if (grouping[j]['__EMPTY'] === fieldData[k]['__EMPTY_3'] && fieldData[k]['__EMPTY_7'] === '是') {
                        jsonData.option.push(fieldData[k]['__EMPTY'])
                      }
                    }
                    if (jsonData.option.length) {
                      let toConfigureFieldDialogTabsPropOption = '';
                      for (let k = 0; k < jsonData.option.length; k++) {
                        toConfigureFieldDialogTabsPropOption += `{checkbox: true, label: '${jsonData.option[k]}', show: true, order: 0},
                        `
                      }
                      toConfigureFieldDialogTabsProp += `
                      {
                        name: '${grouping[j]['__EMPTY']}',//标题
                        show: true,//搜索是否显示
                        option: [${toConfigureFieldDialogTabsPropOption}]
                      },
                      `
                    }
                  }

                  tabsSearchData = `
                  //tabs 搜索配置
                  tabsSearchData:{`;//tabs 搜索data
                  let tabsSearchFromVue = ''
                  for (let j = 0; j < tabsFieldData.length; j++) {
                    let tabsSearchFromVue2 = `<li  v-if="Utils.tabsShowOrder('${tabsFieldData[j]['__EMPTY']}',toConfigureFieldDialog.tabsProp).checkbox" :style="{order:Utils.tabsShowOrder('${tabsFieldData[j]['__EMPTY']}',toConfigureFieldDialog.tabsProp).order}">
                                             <span>${tabsFieldData[j]['__EMPTY']}</span>
                                             `
                    switch (tabsFieldData[j]['__EMPTY_4']) {
                      case '输入框':
                        tabsSearchFromVue2 += `<el-input placeholder="请输入${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" clearable />
                                           </li>
                           `

                        tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:encodeURI(this.tabsSearchData.${tabsFieldData[j]['field']}),//${tabsFieldData[j]['__EMPTY']}
                        `
                        break;
                      case '密码框':
                        tabsSearchFromVue2 += `<el-input placeholder="请输入${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" show-password />
                                           </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:encodeURI(this.tabsSearchData.${tabsFieldData[j]['field']}),//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '文本域':
                        tabsSearchFromVue2 += `<el-input type="textarea" placeholder="请输入${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit />
                                           </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:encodeURI(this.tabsSearchData.${tabsFieldData[j]['field']}),//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '单选框':
                        tabsSearchFromVue2 += `<el-radio-group v-model="tabsSearchData.${tabsFieldData[j]['field']}">
                                               <el-radio v-for="(item,key) in ${tabsFieldData[j]['field']}Option" :key="key" :label="item.value">{{ item.label }}</el-radio>
                                               </el-radio-group>
                                           </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:this.tabsSearchData.${tabsFieldData[j]['field']},//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '多选框':
                        tabsSearchFromVue2 += `<el-checkbox-group v-model="tabsSearchData.${tabsFieldData[j]['field']}">
                                                <el-checkbox v-for="item in ${tabsFieldData[j]['field']}Option" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                                              </el-checkbox-group>
                                           </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:[],//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:this.tabsSearchData.${tabsFieldData[j]['field']}.toString(),//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '下拉框':
                        tabsSearchFromVue2 += `<el-select placeholder="请选择${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" filterable clearable>
                                  <el-option v-for="item in ${tabsFieldData[j]['field']}Option" :key="item.value" :label="item.label" :value="item.value"/>
                                </el-select>
                                </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:this.tabsSearchData.${tabsFieldData[j]['field']},//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '级联选择器':
                        tabsSearchFromVue2 += `<el-cascader placeholder="请选择${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" filterable clearable :options="${tabsFieldData[j]['field']}Option" :props="{ expandTrigger: 'hover'}" />
                                           </li>
                        `
                        tabsSearchData += `${tabsFieldData[j]['field']}:[],//${tabsFieldData[j]['__EMPTY']}
                        `
                        //table搜索过滤
                        tableParamsData += `
                                ${tabsFieldData[j]['field']}:this.tabsSearchData.${tabsFieldData[j]['field']}.toString(),//${tabsFieldData[j]['__EMPTY']}
                        `
                        break
                      case '日期选择器':
                        if (['日期和时间范围', '日期范围'].includes(tabsFieldData[j]['__EMPTY_16'])) {
                          tabsSearchFromVue2 += `<el-date-picker placeholder="请选择${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" type="${this.searchQuery(tabsFieldData[j]['__EMPTY_16'], this.dateTypeOptions)}" value-format="timestamp" :default-time="['00:00:00', '23:59:59']" />
                                           </li>
                        `
                          tabsSearchData += `${tabsFieldData[j]['field']}:[],//${tabsFieldData[j]['__EMPTY']}
                          `
                          //table搜索过滤
                          tableParamsData += `
                                ${tabsFieldData[j]['field']}1:this.tabsSearchData.${tabsFieldData[j]['field']}.length?this.Utils.timeDate(this.tabsSearchData.${tabsFieldData[j]['field']}[0], 4):'',//${tabsFieldData[j]['__EMPTY']}
                                ${tabsFieldData[j]['field']}2:this.tabsSearchData.${tabsFieldData[j]['field']}.length?this.Utils.timeDate(this.tabsSearchData.${tabsFieldData[j]['field']}[1], 4):'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        } else {
                          tabsSearchFromVue2 += `<el-date-picker placeholder="请选择${tabsFieldData[j]['__EMPTY']}" v-model="tabsSearchData.${tabsFieldData[j]['field']}" type="${this.searchQuery2(tabsFieldData[j]['__EMPTY_16'], this.dateTypeOptions, 'date')}" value-format="timestamp" />
                                           </li>
                          `
                          tabsSearchData += `${tabsFieldData[j]['field']}:'',//${tabsFieldData[j]['__EMPTY']}
                          `
                          //table搜索过滤
                          tableParamsData += `
                                ${tabsFieldData[j]['field']}:this.tabsSearchData.${tabsFieldData[j]['field']}?this.Utils.timeDate(this.tabsSearchData.${tabsFieldData[j]['field']}, 4):'',//${tabsFieldData[j]['__EMPTY']}
                        `
                        }
                        break
                    }
                    tabsSearchFromVue += tabsSearchFromVue2;
                  }
                  tabsSearchData += `},`
                  tabsSearchVue += `
                                    <div class="common-tabs-right">
                                      <div class="common-tabs-right-search">
                                        <el-button type="info" @click="tabsProp.SearchDropDown=!tabsProp.SearchDropDown">
                                          高级搜索
                                          <i :class="[tabsProp.SearchDropDown?'el-icon-bottom':'el-icon-top','el-icon--right']"></i>
                                        </el-button>
                                      </div>
                                    </div>
                                    <!--tabs 搜索下拉的值-->
                                    <el-collapse-transition  v-if="tabsProp.SearchDropDown">
                                        <ul class="common-tabs-from" ref="commonTabsFrom">
                                            ${tabsSearchFromVue}
                                            <li v-for="index in tabsProp.liHtmlNum" :key="index+1000"  style="order:888"></li>
                                            <li class="common-tabs-from-but" style="order:999">
                                              <el-button icon="el-icon-setting" circle @click="tabsOrTableSetClick('tabsProp','筛选项配置')"/>
                                              <el-button icon="el-icon-refresh el-icon--left" @click="tabsSearchReset">重置</el-button>
                                              <el-button icon="el-icon-search el-icon--left" type="primary" @click="tabsSearchDetermine">查询</el-button>
                                            </li>
                                        </ul>
                                    </el-collapse-transition>
                    `
                  lastMethods += `
                           //tabs 点击设置图标 dialog拖拽
                           tabsSetUpSearchClick() {
                              console.log('tabs 点击设置图标')
                           },
                          //tabs 高级搜索 重置按钮
                          tabsSearchReset() {
                            this.tabsSearchData = this.$options.data().tabsSearchData;
                          },
                          //tabs 高级搜索 查询按钮点击
                          tabsSearchDetermine() {
                            this.paginationProp.currentPage = 1;//当前第几页
                            this.initData();
                          },
                  `
                }

                lastMethods += `
                            //tabs 切换点击
                            tabsSwitchClick() {
                              this.paginationProp.currentPage = 1;//当前第几页
                              this.initData();
                            },
                `
                tabsVueAll += `
                                <div class="common-tabs" ref="tabs">
                                  <!--tabs切换标题-->
                                  <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
                                    ${tabPane}
                                  </el-tabs>
                                ${tabsSearchVue}
                                 </div>
                  `
              }
              //tabs 结束

              //table 数据生产  开始

              //table和table dialog tabs配置
              for (let j = 0; j < grouping.length; j++) {
                let jsonData = {
                  name: grouping[j]['__EMPTY'],//标题
                  show: true,//搜索是否显示
                  option: []
                }
                for (let k = 0; k < fieldData.length; k++) {
                  if (grouping[j]['__EMPTY'] === fieldData[k]['__EMPTY_3'] && fieldData[k]['__EMPTY_8'] !== '是') {
                    jsonData.option.push(fieldData[k]['__EMPTY'])
                  }
                }
                if (jsonData.option.length) {
                  let toConfigureFieldDialogTbalePropOption = '';
                  for (let k = 0; k < jsonData.option.length; k++) {
                    toConfigureFieldDialogTbalePropOption += `{checkbox: true, label: '${jsonData.option[k]}', show: true, fixed: false},
                        `
                  }
                  toConfigureFieldDialogTableProp += `
                      {
                        name: '${grouping[j]['__EMPTY']}',//标题
                        show: true,//搜索是否显示
                        option: [${toConfigureFieldDialogTbalePropOption}]
                      },
                      `
                }
              }


              let tableTitleButVue = '';//表格前的按钮 Vue
              for (let j = 0; j < tableTitleBut.length; j++) {
                tableTitleButVue += `
                                    <el-button type="${this.searchQuery2(tableTitleBut[j]['__EMPTY_1'], this.butColorOptions, 'warning')}" icon="${tableTitleBut[j]['__EMPTY_2'] ? tableTitleBut[j]['__EMPTY_2'] : 'el-icon-check'} el-icon--left" @click="tableTitleBut${j}">${tableTitleBut[j]['__EMPTY']}</el-button>
                `
                allMethods += `
                              //table 头部 ${tableTitleBut[j]['__EMPTY']} 点击
                              tableTitleBut${j}(){
                                  console.log('table头部${tableTitleBut[j]['__EMPTY']}点击')
                              },
                    `
              }
              let tablePageVue = '';//分页内容
              //分页
              if (tableBasics[0]['__EMPTY'] === '是') {
                tablePageVue += `
                              <div class="common-pagination">
                                <el-pagination
                                    @size-change="pageSizeChange"
                                    @current-change="pageCurrentChange"
                                    :current-page="paginationProp.currentPage"
                                    :page-sizes="[10, 20, 50, 100,500,1000]"
                                    :page-size="paginationProp.pageSize"
                                    layout="total,sizes, prev, pager, next, jumper"
                                    :total="paginationProp.total"
                                />
                              </div>
                `
                lastMethods += `
                              //table 分页 选择了每页几条
                              pageSizeChange(val) {
                                this.paginationProp.currentPage = 1;//当前第几页
                                this.paginationProp.pageSize = val;//每页几条
                                this.initData();
                              },
                              //table 分页 点击了跳转到第几页
                              pageCurrentChange(val) {
                                this.paginationProp.currentPage = val;//当前第几页
                                this.initData();
                              },
                `
              }
              //table vue
              let tableVue = `
                              <el-table
                                  ref="table"
                                  :data="tableData"
                                  border
                                  style="width: 100%"
                                  :max-height="tableProp.tableHeight"
                                  :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                                  v-loading="tableProp.loading"
                                  @selection-change="tableSelectionChange"
                                  class="cc-table-style"
                              >
              `;
              //序号
              if (tableBasics[0]['__EMPTY_1'] === '是') {
                tableVue += `
                            <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
                `
              }
              //有多选
              if (tableBasics[0]['__EMPTY_2'] === '是') {
                tableVue += `
                            <el-table-column type="selection" width="50" align="center" fixed="left"/>
                `
              }
              lastMethods += `
                              //table 多选
                              tableSelectionChange(val) {
                                this.tableProp.tableSelectAll=[];
                                for (let i = 0; i < val.length; i++) {
                                  this.tableProp.tableSelectAll.push(val[i].id)
                                }
                              },
                `

              //table 表格内容循环
              for (let j = 0; j < tableFieldData.length; j++) {
                let uploadFileDownloadname = tableFieldData[j]['__EMPTY'];
                let uploadFileDownloadKey = '@click="uploadFileDownload(item.fileName,`' + uploadFileDownloadname + '${key+1}`)"'
                switch (tableFieldData[j]['__EMPTY_4']) {
                  case '输入框':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed"/>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']},//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '密码框':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed"/>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: '********',//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '文本域':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed"/>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']},//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '单选框':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                     <template slot-scope="scope">
                                        <template v-for="item in ${tableFieldData[j]['field']}Option">
                                          <template v-if="scope.row.${tableFieldData[j]['field']}==item.value">
                                            {{ item.label }}
                                          </template>
                                        </template>
                                     </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?item.${tableFieldData[j]['field']}:'',//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '多选框':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                    <template slot-scope="scope">
                                         <label v-for="(item,key) in scope.row.${tableFieldData[j]['field']}" :key="key">
                                          <label v-for="(item2,key2) in ${tableFieldData[j]['field']}Option" :key="key2">
                                            <label v-if="item== item2.value">
                                              {{ item2.label }}<i v-if="scope.row.${tableFieldData[j]['field']}.length>key+1">、</i>
                                            </label>
                                          </label>
                                        </label>
                                    </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?item.${tableFieldData[j]['field']}.split(','):[],//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '下拉框':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                    <template slot-scope="scope">
                                      <template v-for="item in ${tableFieldData[j]['field']}Option">
                                        <template v-if="scope.row.${tableFieldData[j]['field']}==item.value">
                                          {{ item.label }}
                                        </template>
                                      </template>
                                    </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?item.${tableFieldData[j]['field']}:'',//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '级联选择器':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                    <template slot-scope="scope">
                                        <label v-for="(item,key) in scope.row.${tableFieldData[j]['field']}" :key="key">
                                          <label v-for="(item2,key2) in ${tableFieldData[j]['field']}Option" :key="key2">
                                            <label v-if="item== item2.value">
                                              {{ item2.label }}<i v-if="scope.row.${tableFieldData[j]['field']}.length>key+1">/</i>
                                            </label>
                                            <label v-for="(item3,key3) in item2.children" :key="key3">
                                              <label v-if="item== item3.value">
                                                {{ item3.label }}<i v-if="scope.row.${tableFieldData[j]['field']}.length>key+1">/</i>
                                              </label>
                                              <label v-for="(item4,key4) in item3.children" :key="key4">
                                                <label v-if="item== item4.value">
                                                  {{ item4.label }}<i v-if="scope.row.${tableFieldData[j]['field']}.length>key+1">/</i>
                                                </label>
                                              </label>
                                            </label>
                                          </label>
                                        </label>
                                    </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?item.${tableFieldData[j]['field']}.split(','):[],//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '日期选择器':
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed"/>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']},//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '文件上传':
                    fileBoolean = true;
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                    <template slot-scope="scope">
                                      <div class="table-upload-file-box">
                                        <ul>
                                          <li
                                              v-for="(item,key) in scope.row.${tableFieldData[j]['field']}"
                                              :key="key"
                                              ${uploadFileDownloadKey}
                                          >
                                            <i class="el-icon-notebook-2"></i>
                                            <span>${tableFieldData[j]['__EMPTY']}{{key+1}}</span>
                                            <i class="el-icon-download"></i>
                                          </li>
                                        </ul>
                                      </div>
                                    </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?JSON.parse(item.${tableFieldData[j]['field']}):[],//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                  case '图片上传':
                    imgBoolean = true;//是否有上传图片 查看
                    tableVue += `
                                <el-table-column label="${tableFieldData[j]['__EMPTY']}" min-width="${tableFieldData[j]['__EMPTY_12'] ? tableFieldData[j]['__EMPTY_12'] : 150}" :show-overflow-tooltip="true" align="center" prop="${tableFieldData[j]['field']}" v-if="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).checkbox" :fixed="Utils.tableShowFixed('${tableFieldData[j]['__EMPTY']}',this.toConfigureFieldDialog.tableProp).fixed">
                                <template slot-scope="scope">
                                  <div class="table-upload-img-show">
                                    <ul>
                                      <li v-for="(item,key) in  scope.row.${tableFieldData[j]['field']}" :key="key">
                                        <el-image
                                            :src="$store.state.env+'/'+item.fileName"
                                            :preview-src-list="Utils.arrayMoveOne(item.fileName,scope.row.${tableFieldData[j]['field']},'fileName')"
                                            @click="clickImage"
                                        >
                                        </el-image>
                                      </li>
                                    </ul>
                                  </div>
                                </template>
                                </el-table-column>
                       `
                    //table返回值处理
                    tableInitData += `
                          ${tableFieldData[j]['field']}: item.${tableFieldData[j]['field']}?JSON.parse(item.${tableFieldData[j]['field']}):[],//${tableFieldData[j]['__EMPTY']}
                    `
                    break;
                }
              }

              //table 操作
              let tableButVue = '';
              for (let j = 0; j < tableButData.length; j++) {
                switch (tableButData[j]['__EMPTY_1']) {
                  case '查看':
                    editBoolean = true;
                    tableButVue += `
                           <el-button type="${this.searchQuery2(tableButData[j]['__EMPTY_2'], this.butColorOptions, 'primary')}"  icon="${tableButData[j]['__EMPTY_3'] ? tableButData[j]['__EMPTY_3'] : 'el-icon-view'} el-icon--left" @click="tableSeeClick(scope.row,0)">${tableButData[j]['__EMPTY']}</el-button>
                       `
                    break;
                  case '删除':
                    tableButVue += `
                           <el-button type="${this.searchQuery2(tableButData[j]['__EMPTY_2'], this.butColorOptions, 'danger')}"  icon="${tableButData[j]['__EMPTY_3'] ? tableButData[j]['__EMPTY_3'] : 'el-icon-delete'} el-icon--left" @click="tableDelClick(scope.row)">${tableButData[j]['__EMPTY']}</el-button>
                       `
                    lastMethods += `
                               //table 点击删除
                              tableDelClick(row) {
                                this.$confirm('此操作将永久删除, 是否继续?', {
                                  confirmButtonText: '确定',
                                  cancelButtonText: '取消',
                                  type: 'warning'
                                }).then(() => {
                                  let data = {
                                    id: row.id
                                  }
                                  ${apiProp2.tableDel}(data).then(() => {
                                    this.$message.success('删除成功');
                                    this.initData();
                                  })
                                }).catch(() => {
                                  this.$message.info('已取消删除');
                                });
                              },
                    `
                    break
                  case '其他':
                    tableButVue += `
                            <el-button type="${this.searchQuery2(tableButData[j]['__EMPTY_2'], this.butColorOptions, 'warning')}" icon="${tableButData[j]['__EMPTY_3'] ? tableButData[j]['__EMPTY_3'] : 'el-icon-check'} el-icon--left" @click="tableBut${j}(scope.row)">${tableButData[j]['__EMPTY']}</el-button>
                       `
                    allMethods += `
                                //table ${tableButData[j]['__EMPTY']} 点击
                                tableBut${j}(row){
                                  console.log(row)
                                },
                    `

                    break
                }

              }
              if (tableButData.length) {
                tableVue += `
                                <el-table-column label="操作"  width="${tableButData.length * 115}" align="center" fixed="right">
                                <template slot-scope="scope">
                                     ${tableButVue}
                                </template>
                                </el-table-column>
                `
              }
              //有编辑按钮
              if (editBoolean) {
                lastMethods += `
                          //抽屉 点击编辑
                          drawerEdit(key){
                            this.drawerProp.title='${tableBasics[0]['__EMPTY_4'] ? tableBasics[0]['__EMPTY_4'] : '编辑详细'}';
                            this.drawerProp.status = 'edit';
                            this.drawerActiveClick(key);
                          },
                `
              }
              //有新增或者编辑按钮
              let editAddFromData = '';//保存时候的data显示
              if (addBoolean || editBoolean) {
                //抽屉配置
                let drawerLeftProp = ''
                for (let j = 0; j < grouping.length; j++) {
                  drawerLeftProp += `'${grouping[j]['__EMPTY']}',`
                }
                drawerProp += `
                          //新增抽屉 配置
                          drawerProp: {
                                  isDrawer: false,
                                  loading: false,
                                  title: '',
                                  active: 0,//左边选择了哪个
                                  status: 'add',// add 新增  see 查看
                                  leftProp: [${drawerLeftProp}],
                                  rightProp: {
                                    height: document.documentElement.clientHeight - 90,//右边高度
                                  }
                          },
                `
                //抽屉vue
                //抽屉li集合数据
                let drawerVueLiArray = [];//li数组
                for (let j = 0; j < grouping.length; j++) {
                  let jsonData = {
                    name: grouping[j]['__EMPTY'],
                    children: []
                  }
                  for (let k = 0; k < formFieldData.length; k++) {
                    if (grouping[j]['__EMPTY'] === formFieldData[k]['__EMPTY_3']) {
                      jsonData.children.push(formFieldData[k])
                    }
                  }
                  drawerVueLiArray.push(jsonData)
                }
                let drawerVueLi = '';//抽屉 livue
                for (let j = 0; j < drawerVueLiArray.length; j++) {
                  let drawerVueSeeLi = '';//查看li vue
                  let drawerVueEditLi = '';//编辑livue
                  for (let k = 0; k < drawerVueLiArray[j].children.length; k++) {
                    let drawerVueSeeLiForm = '';//查看li里面的li
                    let drawerVueEditLiForm = '';//编辑li里面的li
                    let drawerEditRules = `[]`;//编辑验证
                    let uploadFileDownloadname = drawerVueLiArray[j].children[k]['__EMPTY'];
                    let uploadFileDownloadKey = '@click="uploadFileDownload(item.fileName,`' + uploadFileDownloadname + '${key+1}`)"'
                    switch (drawerVueLiArray[j].children[k]['__EMPTY_4']) {
                      case '输入框':
                        drawerVueSeeLiForm += `
                             {{ formData.${drawerVueLiArray[j].children[k]['field']} }}
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请输入${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'blur' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                    <el-input placeholder="请输入${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" clearable/>
                        `
                        break;
                      case '密码框':
                        drawerVueSeeLiForm += `
                             {{ formData.${drawerVueLiArray[j].children[k]['field']} }}
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请输入${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'blur' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                    <el-input placeholder="请输入${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" show-password/>
                        `
                        break;
                      case '文本域':
                        drawerVueSeeLiForm += `
                             {{ formData.${drawerVueLiArray[j].children[k]['field']} }}
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请输入${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'blur' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                     <el-input type="textarea" placeholder="请输入${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
                        `
                        break;
                      case '单选框':
                        drawerVueSeeLiForm += `
                            <template v-for="item in ${drawerVueLiArray[j].children[k]['field']}Option">
                              <template v-if="formData.${drawerVueLiArray[j].children[k]['field']}==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                               <el-radio-group v-model="formData.${drawerVueLiArray[j].children[k]['field']}">
                                  <el-radio v-for="(item,key) in ${drawerVueLiArray[j].children[k]['field']}Option" :key="key" :label="item.value">{{ item.label }}</el-radio>
                                </el-radio-group>
                        `
                        break;
                      case '多选框':
                        drawerVueSeeLiForm += `
                                             <div>
                                                <label v-for="(item,key) in formData.${drawerVueLiArray[j].children[k]['field']}" :key="key">
                                                  <label v-for="(item2,key2) in ${drawerVueLiArray[j].children[k]['field']}Option" :key="key2">
                                                    <label v-if="item== item2.value">
                                                      {{ item2.label }}<i v-if="formData.${drawerVueLiArray[j].children[k]['field']}.length>key+1">、</i>
                                                    </label>
                                                  </label>
                                                </label>
                                            </div>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                   <el-checkbox-group v-model="formData.${drawerVueLiArray[j].children[k]['field']}">
                                    <el-checkbox v-for="item in ${drawerVueLiArray[j].children[k]['field']}Option" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                                  </el-checkbox-group>
                        `
                        break;
                      case '下拉框':
                        drawerVueSeeLiForm += `
                                        <template v-for="item  in ${drawerVueLiArray[j].children[k]['field']}Option">
                                          <template v-if="formData.${drawerVueLiArray[j].children[k]['field']}==item.value">
                                            {{ item.label }}
                                          </template>
                                        </template>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                         <el-select placeholder="请选择${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" filterable clearable>
                                          <el-option v-for="item in ${drawerVueLiArray[j].children[k]['field']}Option" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                        `
                        break;
                      case '级联选择器':
                        drawerVueSeeLiForm += `
                                            <div>
                                              <label v-for="(item,key) in formData.${drawerVueLiArray[j].children[k]['field']}" :key="key">
                                                <label v-for="(item2,key2) in ${drawerVueLiArray[j].children[k]['field']}Option" :key="key2">
                                                  <label v-if="item== item2.value">
                                                    {{ item2.label }}<i v-if="formData.${drawerVueLiArray[j].children[k]['field']}.length>key+1">/</i>
                                                  </label>
                                                  <label v-for="(item3,key3) in item2.children" :key="key3">
                                                    <label v-if="item== item3.value">
                                                      {{ item3.label }}<i v-if="formData.${drawerVueLiArray[j].children[k]['field']}.length>key+1">/</i>
                                                    </label>
                                                    <label v-for="(item4,key4) in item3.children" :key="key4">
                                                      <label v-if="item== item4.value">
                                                        {{ item4.label }}<i v-if="formData.${drawerVueLiArray[j].children[k]['field']}.length>key+1">/</i>
                                                      </label>
                                                    </label>
                                                  </label>
                                                </label>
                                              </label>
                                            </div>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        //编辑li vue
                        drawerVueEditLiForm = `
                                  <el-cascader placeholder="请选择${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" filterable clearable :options="${drawerVueLiArray[j].children[k]['field']}Option" :props="{ expandTrigger: 'hover'}" />
                        `
                        break;
                      case '日期选择器':
                        drawerVueSeeLiForm += `
                            {{ formData.${drawerVueLiArray[j].children[k]['field']}?Utils.timeDate(formData.${drawerVueLiArray[j].children[k]['field']},3):"" }}
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        //编辑li vue
                        if (['日期和时间范围', '日期范围'].includes(drawerVueLiArray[j].children[k]['__EMPTY_16'])) {
                          drawerVueEditLiForm = `<el-date-picker placeholder="请选择${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" type="${this.searchQuery(drawerVueLiArray[j].children[k]['__EMPTY_16'], this.dateTypeOptions)}" value-format="timestamp" :default-time="['00:00:00', '23:59:59']" />
                        `
                        } else {
                          drawerVueEditLiForm = `<el-date-picker placeholder="请选择${drawerVueLiArray[j].children[k]['__EMPTY']}" v-model="formData.${drawerVueLiArray[j].children[k]['field']}" type="${this.searchQuery2(drawerVueLiArray[j].children[k]['__EMPTY_16'], this.dateTypeOptions, 'date')}" value-format="timestamp" />
                        `
                        }
                        break;
                      case '文件上传':
                        fileBoolean = true;
                        drawerVueSeeLiForm += `
                                          <div class="table-upload-file-box">
                                            <ul>
                                              <li
                                                  v-for="(item,key) in formData.${drawerVueLiArray[j].children[k]['field']}"
                                                  :key="key"
                                                   ${uploadFileDownloadKey}
                                              >
                                                <i class="el-icon-notebook-2"></i>
                                                <span>${drawerVueLiArray[j].children[k]['__EMPTY']}{{key+1}}</span>
                                                <i class="el-icon-download"></i>
                                              </li>
                                            </ul>
                                          </div>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        drawerVueEditLiForm = `
                                    <el-checkbox-group v-model="formData.${drawerVueLiArray[j].children[k]['field']}" v-show="false">
                                      <el-checkbox label="">验证需要</el-checkbox>
                                    </el-checkbox-group>
                                    <common-upload-file
                                        :disabled="${drawerVueLiArray[j].children[k]['field']}Option.disabled"
                                        :componentSetOptions="${drawerVueLiArray[j].children[k]['field']}Option"
                                        :uploadValue="formData.${drawerVueLiArray[j].children[k]['field']}"
                                    />

                        `
                        break;
                      case '图片上传':
                        imgBoolean = true;//是否有上传图片 查看
                        drawerVueSeeLiForm += `
                                        <div class="table-upload-img-show">
                                          <ul>
                                            <li v-for="(item,key) in  formData.${drawerVueLiArray[j].children[k]['field']}" :key="key">
                                              <el-image
                                                  :src="$store.state.env+'/'+item.fileName"
                                                  :preview-src-list="Utils.arrayMoveOne(item.fileName,formData.${drawerVueLiArray[j].children[k]['field']},'fileName')"
                                                  @click="clickImage"
                                              >
                                              </el-image>
                                            </li>
                                          </ul>
                                        </div>
                        `
                        // 编辑验证
                        if (drawerVueLiArray[j].children[k]['__EMPTY_5'] === '是') {
                          if (drawerVueLiArray[j].children[k]['__EMPTY_6']) {
                            drawerEditRules = drawerVueLiArray[j].children[k]['__EMPTY_6'];
                          } else {
                            drawerEditRules = `[{ required: true, message: '请选择${drawerVueLiArray[j].children[k]['__EMPTY']}', trigger: 'change' }]`
                          }
                        }
                        drawerVueEditLiForm = `
                                    <el-checkbox-group v-model="formData.${drawerVueLiArray[j].children[k]['field']}" v-show="false">
                                      <el-checkbox label="">验证需要</el-checkbox>
                                    </el-checkbox-group>
                                    <common-upload-img
                                        :disabled="${drawerVueLiArray[j].children[k]['field']}Option.disabled"
                                        :componentSetOptions="${drawerVueLiArray[j].children[k]['field']}Option"
                                        :uploadValue="formData.${drawerVueLiArray[j].children[k]['field']}"
                                    />

                        `
                        break;

                    }
                    //查看
                    if (drawerVueLiArray[j].children[k]['__EMPTY_10'] !== '是') {
                      drawerVueSeeLi += `
                              <li class="common-drawer-see-li ${drawerVueLiArray[j].children[k]['__EMPTY_13'] === '是' ? 'li2' : ''}">
                                <span class="common-drawer-see-li-title">${drawerVueLiArray[j].children[k]['__EMPTY']}</span>
                                ${drawerVueSeeLiForm}
                              </li>
                      `
                    }
                    //编辑
                    if (drawerVueLiArray[j].children[k]['__EMPTY_11'] !== '是') {
                      // :prop="formData.${drawerVueLiArray[j].children[k]['field']}"
                      drawerVueEditLi += `
                                        <el-form-item label="${drawerVueLiArray[j].children[k]['__EMPTY']}" prop="${drawerVueLiArray[j].children[k]['field']}"  class="common-drawer-edit-li ${drawerVueLiArray[j].children[k]['__EMPTY_14'] === '是' ? 'li2' : ''}" :rules="${drawerEditRules}">
                                           ${drawerVueEditLiForm}
                                        </el-form-item>
                      `
                    }
                  }
                  drawerVueLi += `
                          <li class="content-main" ref="drawerLi${j}">
                          <!--标题-->
                          <div class="title">
                            <span></span>
                            <label>${drawerVueLiArray[j].name}</label>
                            <div class="s"></div>
                            <template v-if="drawerProp.status==='see'">
                              <div class="n" @click="drawerEdit(${j})">
                                <i class="el-icon-edit"></i>
                                编辑
                              </div>
                            </template>
                          </div>
                          <!--查看-->
                          <div class="see" v-if="drawerProp.status==='see'">
                            <ul class="common-drawer-see">
                                ${drawerVueSeeLi}
                            </ul>
                          </div>
                          <!--修改-->
                          <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                            <el-form :model="formData" ref="drawerFrom${j}" class="common-drawer-edit">
                               ${drawerVueEditLi}
                            </el-form>
                          </div>
                        </li>
                  `
                }
                drawerVueAll += `
                              <el-drawer
                                      :title="drawerProp.title"
                                      :visible.sync="drawerProp.isDrawer"
                                      direction="rtl"
                                      :append-to-body="true"
                                      :modal-append-to-body="false"
                                      custom-class="common-drawer"
                                      size="1050px"
                                  >
                                    <div class="common-drawer-content" v-loading="drawerProp.loading">
                                      <div class="parent">
                                        <!--左边-->
                                        <div class="leftChild">
                                          <ul class="content">
                                            <template v-for="(item,key) in drawerProp.leftProp">
                                              <li :key="key" :class="[drawerProp.active===key?'active':'']" @click="drawerActiveClick(key)">
                                                {{ item }}
                                              </li>
                                            </template>
                                          </ul>
                                        </div>
                                        <!--右边-->
                                        <div class="rightChild">
                                          <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange" :style="{'height': drawerProp.rightProp.height+'px'}">
                                                ${drawerVueLi}
                                          </ul>
                                        </div>
                                      </div>
                                      <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
                                        <el-button
                                            icon="el-icon-close el-icon--left"
                                            @click="drawerProp.isDrawer=false"
                                        >
                                          取消
                                        </el-button>
                                        <el-button
                                            type="primary"
                                            icon="el-icon-check el-icon--left"
                                            @click="drawerSubmitForm('add')"
                                        >
                                          保存
                                        </el-button>
                                      </div>
                                      <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
                                        <el-button
                                            icon="el-icon-close el-icon--left"
                                            @click="drawerSubmitForm('see')"
                                        >
                                          取消
                                        </el-button>
                                        <el-button
                                            type="primary"
                                            icon="el-icon-check el-icon--left"
                                            @click="drawerSubmitForm('edit')"
                                        >
                                          保存
                                        </el-button>
                                      </div>
                                    </div>
                                  </el-drawer>
                `
                //查看数据处理
                let seeFromData = '';//查看数据
                for (let j = 0; j < formFieldData.length; j++) {
                  switch (formFieldData[j]['__EMPTY_4']) {
                    case '输入框':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']};//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '密码框':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}='********';//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '文本域':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']};//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '单选框':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']};//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '多选框':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']}?result.data.${formFieldData[j]['field']}.split(","):[];//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '下拉框':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']};//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '级联选择器':
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']}?result.data.${formFieldData[j]['field']}.split(","):[];//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '日期选择器':
                      if (['日期和时间范围', '日期范围'].includes(formFieldData[j]['__EMPTY_16'])) {
                        seeFromData += `
                              this.formData.${formFieldData[j]['field']}= result.data.${formFieldData[j]['field']};//${formFieldData[j]['__EMPTY']}
                      `
                      } else {
                        seeFromData += `
                              this.formData.${formFieldData[j]['field']}= result.data.${formFieldData[j]['field']}?this.Utils.stampData13(result.data.${formFieldData[j]['field']}):'';//${formFieldData[j]['__EMPTY']}
                      `
                      }
                      break
                    case '文件上传':
                      fileBoolean = true;
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']}?JSON.parse(result.data.${formFieldData[j]['field']}):[];//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '图片上传':
                      imgBoolean = true;//是否有上传图片 查看
                      seeFromData += `
                              this.formData.${formFieldData[j]['field']}=result.data.${formFieldData[j]['field']}?JSON.parse(result.data.${formFieldData[j]['field']}):[];//${formFieldData[j]['__EMPTY']}
                      `
                      break;

                  }
                }
                allMethods += `
                            //table 点击查看
                            tableSeeClick(row,key) {
                              this.formData = this.$options.data().formData;
                              this.drawerProp.isDrawer = true;
                              this.drawerProp.loading = true;
                              this.drawerProp.title = '${tableBasics[0]['__EMPTY_3'] ? tableBasics[0]['__EMPTY_3'] : '查看详细'}';
                              this.drawerProp.status = 'see';
                              if(key!==undefined){
                                this.drawerActiveClick(key)
                              }
                              let params = {
                                id: row.id
                              }
                              ${apiProp2.tableQuery}(params).then((result) => {
                                this.formData.id = result.data.id;
                                ${seeFromData}
                                this.drawerProp.loading = false;
                              })
                            },
                `

                //点击保存数据处理
                for (let j = 0; j < formFieldData.length; j++) {
                  switch (formFieldData[j]['__EMPTY_4']) {
                    case '输入框':
                      formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']},//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '密码框':
                      formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']},//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '文本域':
                      formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']},//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '单选框':
                      formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']},//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '多选框':
                      formData += `${formFieldData[j]['field']}:[],//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']}.toString(),//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '下拉框':
                      formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']},//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '级联选择器':
                      formData += `${formFieldData[j]['field']}:[],//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:this.formData.${formFieldData[j]['field']}.toString(),//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '日期选择器':
                      if (['日期和时间范围', '日期范围'].includes(formFieldData[j]['__EMPTY_16'])) {
                        formData += `${formFieldData[j]['field']}:[],//${formFieldData[j]['__EMPTY']}
                        `
                      } else {
                        formData += `${formFieldData[j]['field']}:'',//${formFieldData[j]['__EMPTY']}
                          `
                        editAddFromData += `
                              ${formFieldData[j]['field']}: this.formData.${formFieldData[j]['field']}?this.Utils.timeDate(this.formData.${formFieldData[j]['field']}, 4):'',//${formFieldData[j]['__EMPTY']}
                      `
                      }
                      break
                    case '文件上传':
                      fileBoolean = true;
                      formData += `${formFieldData[j]['field']}:[],//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:JSON.stringify(this.formData.${formFieldData[j]['field']}),//${formFieldData[j]['__EMPTY']}
                      `
                      break;
                    case '图片上传':
                      imgBoolean = true;//是否有上传图片 查看
                      formData += `${formFieldData[j]['field']}:[],//${formFieldData[j]['__EMPTY']}
                      `
                      editAddFromData += `
                              ${formFieldData[j]['field']}:JSON.stringify(this.formData.${formFieldData[j]['field']}),//${formFieldData[j]['__EMPTY']}
                      `
                      break;

                  }
                }
                allMethods += `
                          //抽屉 点击保存 和取消
                          drawerSubmitForm(status) {
                            if(status==='see'){
                              this.drawerProp.status = 'see';
                              this.tableSeeClick({id: this.formData.id},this.drawerProp.active);
                              return false
                            }
                          let variableArray = [];//变量数组
                          for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
                            variableArray.push('form'+i);
                            variableArray[i] = new Promise((resolve) => {
                              this.$refs['drawerFrom'+i].validate((valid) => {
                                if (valid)
                                resolve()
                              })
                            })
                          }
                          Promise.all(variableArray).then(() => {
                              this.drawerProp.loading = true;
                              let data={
                                  id:this.formData.id,
                                  ${editAddFromData}
                              }
                              ${apiProp2.tableAddEdit}(data).then(() => {
                                this.$message.success('保存成功');
                                this.initData();
                                if (status === 'add') {
                                  this.drawerProp.isDrawer = false;
                                  this.drawerProp.loading = false;
                                } else {
                                  this.drawerProp.loading = false;
                                  this.drawerProp.status = 'see';
                                  this.tableSeeClick({id: this.formData.id})
                                }
                              }, () => {
                                this.drawerProp.loading = false;
                              })
                            })
                          },
                `
                let drawerLiData = '`drawerLi${i}`'
                lastMethods += `
                            //抽屉左边 点击切换标题
                            drawerActiveClick(key) {
                              setTimeout(() => {
                                let scrollHeight = 0;
                                this.drawerLiArray = [];
                                for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
                                  this.drawerLiArray.push(this.$refs[${drawerLiData}].scrollHeight);
                                  if (key > i) {
                                    scrollHeight += this.$refs[${drawerLiData}].scrollHeight
                                  }
                                }
                                this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
                                this.drawerProp.active = key;
                              }, 300)
                            },
                            //抽屉右边 监听鼠标滚动
                            addWheelChange() {
                              setTimeout(() => {
                                let scrollTop = 0;
                                for (let i = 0; i < this.drawerLiArray.length; i++) {
                                  scrollTop += this.drawerLiArray[i];
                                  if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
                                    this.drawerProp.active = i;
                                    return false;
                                  }
                                }
                              }, 300)
                            },
                `
              }
              //是否有查看文件
              if (fileBoolean) {
                lastMethods += `
                              //附件下载
                              uploadFileDownload(url, name) {
                                //下载不了是跨域的问题
                                const URL = url
                                window.URL = window.URL || window.webkitURL
                                let xhr = new XMLHttpRequest()
                                xhr.open('get', URL, true)
                                xhr.responseType = 'blob'
                                xhr.onload = function () {
                                  if (this.status == 200) {
                                    //得到一个blob对象
                                    let blob = this.response
                                    let fileUrl = window.URL.createObjectURL(blob)
                                    let a = document.createElement('a')
                                    ;(document.body || document.documentElement).appendChild(a)
                                    a.href = fileUrl
                                    if ('download' in a) {
                                      a.download = name
                                    } else {
                                      a.setAttribute('download', name)
                                    }
                                    a.target = '_self'
                                    a.click()
                                    a.remove()
                                  }
                                }
                                xhr.send()
                              },
                    `
              }
              //是否有查看图片
              if (imgBoolean) {
                lastMethods += `
                        //图片放大下载 开始
                        clickImage() {
                          this.$nextTick(() => {
                            let wrapper = document.getElementsByClassName(
                                'el-image-viewer__actions__inner'
                            )
                            let downImg = document.createElement('i')
                            downImg.setAttribute('class', 'el-icon-download')
                            wrapper[0].appendChild(downImg)
                            if (wrapper.length > 0) {
                              this.wrapperElem = wrapper[0]
                              this.cusClickHandler()
                            }
                          })
                        },
                        cusClickHandler() {
                          this.wrapperElem.addEventListener('click', this.hideCusBtn)
                        },
                        hideCusBtn(e) {
                          let className = e.target.className
                          if (className === 'el-icon-download') {
                            let imgUrl = document.getElementsByClassName(
                                'el-image-viewer__canvas'
                            )[0].children[0].src
                            this.downloadImage(imgUrl)
                          }
                        },
                        downloadImage(imgUrl) {
                          let tmpArr = imgUrl.split('/')
                          let fileName = tmpArr[tmpArr.length - 1]
                          window.URL = window.URL || window.webkitURL
                          let xhr = new XMLHttpRequest()
                          xhr.open('get', imgUrl, true)
                          xhr.responseType = 'blob'
                          xhr.onload = function () {
                            if (this.status == 200) {
                              //得到一个blob对象
                              let blob = this.response
                              let fileUrl = window.URL.createObjectURL(blob)
                              let a = document.createElement('a')
                              ;(document.body || document.documentElement).appendChild(a)
                              a.href = fileUrl
                              if ('download' in a) {
                                a.download = fileName
                              } else {
                                a.setAttribute('download', fileName)
                              }
                              a.target = '_self'
                              a.click()
                              a.remove()
                            }
                          }
                          xhr.send()
                        },
                        //图片放大下载结束
                `
              }

              tableVue += `
                        </el-table>
              `
              formData += `},`
              tableVueAll += `
                            <template>
                              <!--表格前的按钮-->
                              <div class="common-table-title-but" ref="tableTopBut">
                                    ${tableTitleButVue}
                                     <!--<el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableTitleButBatchDel">批量删除</el-button>-->
                                    <el-button icon="el-icon-setting el-icon--left" @click="tabsOrTableSetClick('tableProp','筛表头配置')">
                                    配置表头
                                  </el-button>
                              </div>
                              <!--表格内容-->
                              ${tableVue}
                              <!--分页-->
                              ${tablePageVue}
                            </template>
              `
              let tableTitleButBatchDelApi2="this[`$${this.apiProp.tableBatchDel}`](params)"
              lastMethods += `
                            //table 批量删除
                            tableTitleButBatchDel(){
                              this.$confirm('此操作将永久删除, 是否继续?', {
                                      confirmButtonText: '确定',
                                      cancelButtonText: '取消',
                                      type: 'warning'
                                    }).then(() => {
                                      let params = {
                                        ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
                                      }
                                      ${tableTitleButBatchDelApi2}.then(() => {
                                        this.$message.success('批量删除成功');
                                        this.initData();
                                      })
                                    }).catch(() => {
                                      this.$message.info('已取消批量删除');
                              });
                            },
              `

              //选项data
              for (let j = 0; j < fieldData.length; j++) {
                if (['单选框', '多选框', '下拉框', '级联选择器'].includes(fieldData[j]['__EMPTY_4'])) {
                  optionData += `
                        ${fieldData[j]['field']}Option:[],//${fieldData[j]['__EMPTY']} 选项
                  `
                  if (fieldData[j]['__EMPTY_15']) {
                    let Option112 = 'this.$store.state.'
                    mountedMethods += `
                        this.${fieldData[j]['field']}Option=JSON.parse(JSON.stringify(${Option112}${fieldData[j]['__EMPTY_15']}));//${fieldData[j]['__EMPTY']} 选项
                    `
                  }
                }
                if (fieldData[j]['__EMPTY_4'] === '文件上传') {
                  fileBoolean = true;
                  optionData += `
                        //${fieldData[j]['__EMPTY']} 配置
                        ${fieldData[j]['field']}Option:{
                                          disabled:false,//是否禁用
                                          class: '',//上传文件组件需要修改样式的时候用
                                          name: '点击上传',//显示的按钮名称是否叫点击上传
                                          urlType: 'fileName',//后台返回的字段文件字段值
                                          size: 2,//最大上传几MB的文件
                                          limit: 5,//最多上传多少个文件 0 是不限制
                                          multiple: true,//是否支持多选文件上传
                                          accept: '.xls,.xlsx,.doc,.docx',//可上传文件格式,用,号隔开
                                          delMethod:'',//附件删除方法
                        },
                  `
                }
                if (fieldData[j]['__EMPTY_4'] === '图片上传') {
                  imgBoolean = true;//是否有上传图片 查看
                  optionData += `
                        //${fieldData[j]['__EMPTY']} 配置
                        ${fieldData[j]['field']}Option:{
                                          disabled:false,//是否禁用
                                          isAll: ${fieldData[j]['__EMPTY_17'] === '是' ? false : true},//上传的是否是多图还是一张的 true 多张 false 单张
                                          class: '',//上传图片需要修改样式的时候用
                                          urlType: 'fileName',//后台返回的字段文件字段值
                                          size: 2,//最大上传几MB的图片
                                          limit: 5,//最多上传多少个张图片 0 是不限制
                                          multiple: true,//是否支持多选文件上传
                                          accept: '.png,.jpg,.jpeg,.gif',//可上传文件格式,用,号隔开 .png,.jpg,.jpeg,.gif
                        },
                  `
                }
              }

              //初始化方法
              let initTabsPropStatusField = 'params[`${this.tabsProp.statusField}`]'
              initMethods += `
                      //初始化
                      initData() {
                          this.tableProp.loading = true;
                          //下拉接口
                          let variableArray = [];//变量数组
                          if (!this.apiProp.selectApiBoolean) {
                            // const form1=new Promise((resolve)=>{
                            // this.$().then((result) => {
                            //   console.log(result);
                            // this.empUnitIdOption = result.map(item => ({
                            //  label: item.unitName,
                            //  value: item.id
                            //  }));
                            // resolve()
                            // })
                            // })
                            // variableArray.push(form1)
                            this.apiProp.selectApiBoolean = true;
                          }
                          Promise.all(variableArray).then(() => {
                            if (this.apiProp.tableInit) {
                              let params = {
                                page: this.paginationProp.currentPage,
                                row: this.paginationProp.pageSize,
                                ${tableParamsData}
                              }
                              ${initTabsPropStatusField} = this.tabsProp.active==0?'':this.tabsProp.active;
                              ${apiProp2.tableInit}(params).then((result) => {
                                if (result.data) {
                                if (result.data.length == 0) {
                                  if (this.paginationProp.currentPage != 1) {
                                    this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                                    this.initData()
                                    return false;
                                  }
                                }
                                  this.tableData = result.data.map(item => ({
                                    id:item.id,
                                    ${tableInitData}
                                  }));
                                  this.paginationProp.total = result.count;//总数
                                  this.tableProp.loading = false;
                                } else {
                                  this.tableData = [];
                                  this.paginationProp.total = result.count;//总数
                                  this.tableProp.loading = false;
                                }
                              }, () => {
                                this.tableProp.loading = false;
                              })
                            } else {
                              this.tableProp.loading = false;
                            }
                          })
                        },
              `

              //接口配置

              //vue api 配置
              let tableImport2="process.env.NODE_ENV === 'development' ? `${window.location.origin}/api/"+fileName+"/import.do` : `${window.location.origin}/"+fileName+"/import.do`";
              let apiProp = `
                  //接口名称
                  apiProp: {
                        tableInit: '${fileName}List',//表格初始化
                        tableAddEdit: '${fileName}AddEdit',//表格增加和编辑接口
                        tableDel: '${fileName}Del',//表格删除接口
                        tableQuery: '${fileName}Query',//表格查一条接口
                        tableBatchDel:'${fileName}BatchDel',//批量删除接口
                        tableImport1:${tableImport2},//导入接口
              `
              for (let j = 0; j < interfaceData.length; j++) {
                if (interfaceData[j]['__EMPTY_1'] === '表格增删改查') {
                  if (!interfaceData[j]['__EMPTY_2']) {
                    this.dialogData.show = true;
                    this.dialogData.name = wsname[i];
                    this.dialogData.title = '接口路径';
                    this.dialogData.num = interfaceData[j]['__rowNum__'] + 1;
                    this.dialogData.reason = '接口路径不能为空';
                    return false
                  }
                  routerApiProp += `
                      //table分页列表
                      export function ${fileName}List (params) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}/list.do",
                              method: "post",
                              params:params
                          })
                      }

                      //table 新增/修改
                      export function ${fileName}AddEdit(data) {
                          return http({
                              url: '/${interfaceData[j]['__EMPTY_2']}/save.do',
                              method: "post",
                              data: data
                          })
                      }

                      //table 删除
                      export function ${fileName}Del(params) {
                          return http({
                              url: '/${interfaceData[j]['__EMPTY_2']}/delete.do',
                              method: "post",
                              params: params
                          })
                      }

                      //table 单条数据查询
                      export function ${fileName}Query(params) {
                          return http({
                              url: '/${interfaceData[j]['__EMPTY_2']}/get${this.Utils.englishInitialCapital(interfaceData[j]['__EMPTY_2'])}.do',
                              method: "post",
                              params: params
                          })
                      }

                      //table 得到总记录数
                      export function ${fileName}Count (params) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}/count.do",
                              method: "post",
                              params:params
                          })
                      }
                      //table 不分页列表
                      export function ${fileName}All (params) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}/all.do",
                              method: "post",
                              params:params
                          })
                      }

                      //导出
                      export function navigation13(params) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}/export.do",
                              method: "POST",
                              params: params
                          })
                      }

                      //批量删除
                      export function ${fileName}BatchDel(params) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}/patchDelete.do",
                              method: "post",
                              params: params
                          })
                      }
                  `
                } else if (interfaceData[j]['__EMPTY_1'] === '设置搜索条件和表头') {
                  if (!interfaceData[j]['__EMPTY_5']) {
                    this.dialogData.show = true;
                    this.dialogData.name = wsname[i];
                    this.dialogData.title = '设置搜索条件和表头id';
                    this.dialogData.num = interfaceData[j]['__rowNum__'] + 1;
                    this.dialogData.reason = '设置搜索条件和表头id不能为空';
                    return false
                  }
                  apiProp += `tabsOrTableId: ${interfaceData[j]['__EMPTY_5']},//设置搜索条件和表头id
                  `
                } else {
                  if (!interfaceData[j]['__EMPTY'] || !interfaceData[j]['__EMPTY_2'] || !interfaceData[j]['__EMPTY_3'] || !interfaceData[j]['__EMPTY_4']) {
                    this.dialogData.show = true;
                    this.dialogData.name = wsname[i];
                    this.dialogData.title = '接口名称/接口路径/提交方式/传参方式';
                    this.dialogData.num = interfaceData[j]['__rowNum__'] + 1;
                    this.dialogData.reason = '接口名称/接口路径/提交方式/传参方式不能为空';
                    return false
                  }
                  routerApiProp += `
                      //${interfaceData[j]['__EMPTY']}
                      export function ${fileName}Api${j} (${interfaceData[j]['__EMPTY_4']}) {
                          return http({
                              url: "/${interfaceData[j]['__EMPTY_2']}",
                              method: "${interfaceData[j]['__EMPTY_3']}",
                              ${interfaceData[j]['__EMPTY_4']}:${interfaceData[j]['__EMPTY_4']}
                          })
                      }
                  `
                }
              }
              //vue api 配置
              apiProp += `selectApiBoolean: false,//下拉接口是否拉取过
                    },
              `;
              let endScript = '</scr' + 'ipt>';
              let allStyle = '<style lang="scss" scoped></style>';
              let vueData = `
                            <template>
                              <div>
                                <!--title-->
                                ${titleVueAll}

                                <!--tabs-->
                                ${tabsVueAll}

                                <!--table表格配置-->
                                ${tableVueAll}

                                <!--抽屉增加和修改-->
                                ${drawerVueAll}

                                <!--tabs和table dialog 字段选择显示问题-->
                                <el-dialog
                                  :append-to-body="true"
                                  :close-on-click-modal="false"
                                  :show-close="true"
                                  :close-on-press-escape="false"
                                  :title="toConfigureFieldDialog.title"
                                  :visible.sync="toConfigureFieldDialog.isDialog"
                                  custom-class="toConfigure-field-dialog"
                                  @close="tabsOrTableCancel"
                                  width="1060px"
                                >
                                <div
                                    class="toConfigure-field-dialog-content"
                                    v-loading="toConfigureFieldDialog.loading"
                                >
                                  <div class="left">
                                    <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
                                      <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
                                    </el-input>
                                    <div class="parent">
                                      <div class="child">
                                        <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                                          <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                                            <dl :key="key" class="content" v-if="item.show">
                                              <dt>{{ item.name }}</dt>
                                              <dd>
                                                <template v-for="(item2, key2) in item.option">
                                                  <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2" v-if="item2.show" :disabled="item2.disabled">
                                                    <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label" placement="top-start" :key="key">
                                                      <div class="tooltip">{{ item2.label }}</div>
                                                    </el-tooltip>
                                                  </el-checkbox>
                                                </template>
                                              </dd>
                                            </dl>
                                          </template>
                                        </el-scrollbar>
                                      </div>
                                    </div>
                                  </div>

                                  <div class="right">
                                    <div class="title">
                                      已选择（{{ toConfigureFieldDialog.selectNum }}）
                                    </div>
                                    <div class="parent">
                                      <div class="child">
                                        <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                                          <!--tabs配置-->
                                          <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                                            <draggable v-model="toConfigureFieldDialog.draggableProp">
                                              <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                                                <li :key="key">
                                                  <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close" @click="tabsOrTableClose(item,key)" v-show="!item.disabled"></i>
                                                </li>
                                              </template>
                                            </draggable>
                                          </ul>
                                         <!--table配置-->
                                        <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                                          <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                                            <li :key="key">
                                              <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                                              <el-select v-model="item.fixed" class="frozenSelect">
                                                <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label" :value="item.value"/>
                                              </el-select>
                                              <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                                            </li>
                                          </template>
                                        </ul>
                                        </el-scrollbar>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div slot="footer" class="toConfigure-field-dialog-footer">
                                  <el-button
                                      type="danger"
                                      @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)"
                                      icon="el-icon-delete el-icon--left"
                                  >还原初始化
                                  </el-button>
                                  <el-button
                                      @click="tabsOrTableCancel"
                                      icon="el-icon-close el-icon--left"
                                  >取 消
                                  </el-button>
                                  <el-button
                                      type="primary"
                                      @click="tabsOrTableDetermine"
                                      icon="el-icon-check el-icon--left"
                                  >
                                    确 定
                                  </el-button>
                                </div>
                              </el-dialog>

                              </div>
                            </template>
                            <script>
                            ${importData}
                            import draggable from 'vuedraggable'
                            export default {
                              name:'${fileName}',
                              components: {draggable},
                              props: [],
                              data() {
                                return {
                                   ${apiProp}
                                   ${tabsProp}
                                   ${tabsSearchData}
                                   //table 数据
                                   tableData: [],
                                   tableProp: {
                                    loading: false,
                                    tableHeight: 0,
                                    tableSelectAll:[],//表格多选的值
                                   },
                                   ${drawerProp}
                                   ${formData}
                                   //选项
                                   ${optionData}
                                   //分页配置
                                    paginationProp: {
                                      currentPage: 1,//当前第几页
                                      pageSize: 10,//每页几条
                                      total: 0,//总数
                                    },
                                    //tabs和table dialog 字段选择显示
                                    toConfigureFieldDialog: {
                                      isDialog: false,
                                      title: '筛选项配置',
                                      loading: false,
                                      status: 'tabsProp',
                                      search: '',//搜索的值
                                      selectNum: 0,//选择的数量
                                      frozenFrontNum: 0,//冻结前几条
                                      frozenAfterNum: 0,//冻结后几条
                                      draggableProp: [],//拖拽数据
                                      tabsProp: [
                                          ${toConfigureFieldDialogTabsProp}
                                      ],
                                      tableProp: [
                                          ${toConfigureFieldDialogTableProp}
                                      ]
                                    },
                                }
                              },
                              activated() {
                                  //所有下拉框接口写在这里
                              },
                              mounted() {
                                //高级搜索差几个li
                                this.tabsOrTableInit();
                                ${mountedMethods}
                                this.initData();//数据初始化
                                this.calculationHeight();//table计算高度
                                //监听浏览器变化
                                window.onresize = () => {
                                  return (() => {
                                    this.calculationHeight();//table计算高度
                                  })();
                                };
                               },
                              watch: {
                                //主要作用监听赋值给table高度
                                'tabsProp.SearchDropDown'() {
                                  this.calculationHeight();//table计算高度
                                },
                              },
                              methods: {
                                 ${initMethods}
                                 ${allMethods}
                                 ${lastMethods}
                                  //table 计算高度
                                  calculationHeight() {
                                    setTimeout(() => {
                                      this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
                                    }, 300)
                                  },
                                  //tabs or table dialog 初始化
                                  tabsOrTableInit() {
                                    this.toConfigureFieldDialog.loading = true;
                                    let data = {
                                      tableId: this.apiProp.tabsOrTableId
                                    }
                                    this.$commonApi2(data).then((result) => {
                                      if (result.data && result.data.data) {
                                        this.toConfigureFieldDialog = JSON.parse(result.data.data);
                                      } else {
                                        this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                                      }

                                      this.toConfigureFieldDialog.isDialog = false;
                                      this.toConfigureFieldDialog.loading = false;
                                      let tabsFieldPropNum = 0; //有几个li
                                      for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {

                                        for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
                                          if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
                                            tabsFieldPropNum++
                                          }
                                        }
                                      }
                                      if (this.$refs.commonTabsFrom) {
                                        let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
                                        this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
                                      }
                                    })
                                  },
                                  //tabs or table dialog 点击搜索
                                  tabsOrTableSearch(search) {
                                    if (search) {
                                      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                                        let oneShow = false;//第一层是否显示
                                        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                                          if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
                                            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
                                            oneShow = true;
                                          } else {
                                            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
                                          }
                                        }
                                        this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
                                      }
                                    } else {
                                      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                                        this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
                                        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                                          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
                                        }
                                      }
                                    }
                                  },
                                  //tabs or table dialog 拖动点击删除
                                  tabsOrTableClose(item, key) {
                                    this.toConfigureFieldDialog.draggableProp.splice(key, 1);
                                    for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                                      for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                                        if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
                                          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
                                        }
                                      }
                                    }
                                  },
                                  //tabs or table dialog 清空以前的设置
                                  tabsOrTableDialogEmpty() {
                                    this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
                                      confirmButtonText: '确定',
                                      cancelButtonText: '取消',
                                      type: 'warning'
                                    }).then(() => {
                                      let data = {
                                        tableId: this.apiProp.tabsOrTableId,
                                        data: null
                                      }
                                      this.$commonApi(data).then(() => {
                                        this.$message.success('清空设置成功');
                                        this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                                      })
                                    }).catch(() => {
                                      this.$message.info('已取消清空设置');
                                    });
                                  },
                                  //tabs or table dialog 还原初始化
                                  tabsOrTableDialogReductionInit(status) {
                                    this.toConfigureFieldDialog.loading = true;
                                    let data = {
                                      tableId: this.apiProp.tabsOrTableId,
                                    }
                                    this.$commonApi2(data).then((result) => {
                                      if (result.data && result.data.data) {
                                        this.toConfigureFieldDialog = JSON.parse(result.data.data);
                                      } else {
                                        this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                                      }
                                      this.toConfigureFieldDialog.status = status;
                                      this.toConfigureFieldDialog.draggableProp = [];
                                      for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
                                        for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
                                          if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
                                            this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
                                          }
                                        }
                                      }
                                      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
                                      this.toConfigureFieldDialog.isDialog = true;
                                      this.toConfigureFieldDialog.loading = false;
                                    })
                                  },
                                  //tabs or table dialog 点击 关闭 取消
                                  tabsOrTableCancel() {
                                    this.tabsOrTableInit();
                                  },
                                  //tabs or table dialog 点击确定
                                  tabsOrTableDetermine() {
                                    this.toConfigureFieldDialog.loading = true;
                                    this.toConfigureFieldDialog.search = '';
                                    this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
                                    for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                                      for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                                        for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
                                          if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
                                            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
                                          }
                                        }
                                      }
                                    }
                                    let data = {
                                      tableId: this.apiProp.tabsOrTableId,
                                      data: JSON.stringify(this.toConfigureFieldDialog)
                                    }
                                    this.$commonApi(data).then(() => {
                                      this.$message.success('保存成功');
                                      this.tabsOrTableInit();
                                      this.tabsSearchData = this.$options.data().tabsSearchData;
                                      this.initData();
                                    })
                                  },
                                  //tabs or table dialog 点击选择
                                  tabsOrTableChecked(item) {
                                    if (item.checkbox) {
                                      this.toConfigureFieldDialog.draggableProp.push(item)
                                    } else {
                                      for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
                                        if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
                                          this.toConfigureFieldDialog.draggableProp.splice(i, 1);
                                        }
                                      }
                                    }
                                    this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
                                  },
                                  //tabs table 设置图标和按钮 dialog拖拽
                                  tabsOrTableSetClick(status, title) {
                                    this.toConfigureFieldDialog.loading = true;
                                    this.toConfigureFieldDialog.isDialog = true;
                                    let data = {
                                      tableId: this.apiProp.tabsOrTableId,
                                    }
                                    this.$commonApi2(data).then((result) => {
                                      if (result.data && result.data.data) {
                                        this.toConfigureFieldDialog = JSON.parse(result.data.data)
                                      }
                                      this.toConfigureFieldDialog.title = title;
                                      this.toConfigureFieldDialog.status=status;
                                      this.toConfigureFieldDialog.draggableProp = [];
                                      for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
                                        for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
                                          if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
                                            this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
                                          }
                                        }
                                      }
                                      //排序
                                      this.toConfigureFieldDialog.draggableProp.sort(function(p1, p2) {
                                          return p1.order - p2.order
                                      })
                                      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
                                      this.toConfigureFieldDialog.loading = false;
                                    })
                                  },
                              }
                            };
                            ${endScript}
                            ${allStyle}
              `
              let jsonData = {
                name: `${fileName}.vue`,//vue文件名称
                data: vueData,//vue文件数据
                status: `${fileName}vue文件`
              }
              this.exportFileData.push(jsonData)
              let apiJsonData = {
                name: `${fileName}Api.js`,//api文件名称
                data: routerApiProp,//路由数据
                status: `${fileName}api文件`
              }
              this.exportFileData.push(apiJsonData)
            } else if (wsname[i] === '选项配置') {
              const wsname = workbook.SheetNames[i]// 取第一张表
              const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
              if (!ws.length) {
                continue
              }
              let headersDataTest = "{token: `${window.sessionStorage.getItem('token')}`}"
              let optionProp = `
                  const state = {
                    loading:false,
                    cachedViews:[],//过滤缓存
                    newRouterArray:[],//路由数组 左侧导航使用
                    currentPermissions:'',//当前路由权限 对标 authority 就是是什么端的人进来
                    routerRole:[], // 当前角色权限id 如[1,2,3]  超级管理员是 routerRole:['*']
                    //上传文件之类需要用
                    headersData:${headersDataTest}, //上传图片的token
                    // env:window.location.origin, //显示图片之类要用
                    env:'http://192.168.1.24:8080', //显示图片之类要用
                    //表格左右设置
                    tableFixed:[
                        {label:'默认',value:false},
                        {label:'左',value:'left'},
                        {label:'右',value:'right'},
                    ],
              `
              for (let j = 0; j < ws.length; j++) {
                if (!ws[j]['选项字段'] || !ws[j]['备注']) {
                  this.dialogData.show = true;
                  this.dialogData.name = wsname[i];
                  this.dialogData.title = '选项字段/备注';
                  this.dialogData.num = ws[j]['__rowNum__'] + 1;
                  this.dialogData.reason = '选项字段/备注不能为空';
                  return false
                }
                optionProp += `
                    //${ws[j]['备注']}
                    ${ws[j]['选项字段']}:${ws[j]['选项'] ? ws[j]['选项'] : '[]'},
                `
              }
              optionProp += `
                    }
                    export default state
              `
              let jsonData = {
                name: `state.js`,//文件名称
                data: optionProp,//数据
                status: '选项配置',
              }
              this.exportFileData.push(jsonData)
            }
          }

          if (this.exportFileData.length) {
            (async () => {
              //生成路由
              // let codeStr0 = this.exportFileData[0].data;
              // let blob0 = new Blob([codeStr0], {type: 'text/plain;charset=utf-8'})
              // saveAs(blob0, this.exportFileData[0].name)
              //
              // //生成status
              // let codeStr1 = this.exportFileData[2].data;
              // let blob1 = new Blob([codeStr1], {type: 'text/plain;charset=utf-8'})
              // saveAs(blob1, this.exportFileData[2].name)

              // 生成指定文件文件
              // let codeStr22 = this.exportFileData[45].data;
              // let blob22 = new Blob([codeStr22], {type: 'text/plain;charset=utf-8'})
              // saveAs(blob22, this.exportFileData[45].name)
              // //
              // let codeStr33 = this.exportFileData[46].data;
              // let blob33 = new Blob([codeStr33], {type: 'text/plain;charset=utf-8'})
              // saveAs(blob33, this.exportFileData[46].name)


              //-----------------------------------------------------
              //批量生成文件
              for (let i = 0; i < this.exportFileData.length; i++) {
                await this.Utils.delay(1000);
                //生成文件
                let codeStr = this.exportFileData[i].data;
                let blob = new Blob([codeStr], {type: 'text/plain;charset=utf-8'})
                saveAs(blob, this.exportFileData[i].name)
              }

            })();
          }
        } catch
            (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
  },
};
</script>

<style lang="scss" scoped>
.text4-content {
  height: 80vh;
}

.dialog-content {
  li {
    @include flex();
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed #dadada;

    span {
      flex: 0 0 auto;
      width: 80px;
      text-align: right;
      margin-right: 12px;
    }

    i {
      color: #f56c6c;
    }
  }
}
</style>
